<template>
	<view class="">
		<view class="has_discount">
			
			<view class="discount_one">
				<view class="top">
					<view class="top_left">
						￥<text> 15</text>.00
					</view>
					<view class="top_right">
						<view class="top_right_1">景烨新人券</view>
						<text class="top_right_2">满80减20</text>
						<image class="btn" :src="Url+'index/del_pic.png'"></image>
					</view>
					
				</view>
				<view class="bottom">有效期 2020.06.18-2020.06.21</view>
			</view>
			<view class="discount_one">
				<view class="top">
					<view class="top_left">
						￥<text> 15</text>.00
					</view>
					<view class="top_right">
						<view class="top_right_1">景烨新人券</view>
						<text class="top_right_2">满80减20</text>
						<image class="btn" :src="Url+'index/del_pic.png'"></image>
					</view>
					
				</view>
				<view class="bottom">有效期 2020.06.18-2020.06.21</view>
			</view>
			<view class="discount_one">
				<view class="top">
					<view class="top_left">
						￥<text> 15</text>.00
					</view>
					<view class="top_right">
						<view class="top_right_1">景烨新人券</view>
						<text class="top_right_2">满80减20</text>
						<image class="btn" :src="Url+'index/del_pic.png'"></image>
					</view>
					
				</view>
				<view class="bottom">有效期 2020.06.18-2020.06.21</view>
			</view>
			
			
			<!-- <view class="list"  v-for="(item,index) in discountlist">
				<image src="../../static/image/mine/index/order_discount2.png" mode=""></image>
				<view class="list_content">
					<view class="price">
						<view class="price_p">
							￥<text>{{item.price}}</text>
						</view>
						<view class="price_rule">
							{{item.rule}}
						</view>
					</view>
					<view class="info">
						<view class="info_title">{{item.title}}</view>
						<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
					</view>
					<view class="touse">
						<image src="../../static/image/mine/discount/overdue.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="no_more_discount" v-if="discountlist.length > 0">
				没有更多优惠券了
			</view> -->
		</view>
		<view class="nodiscount" v-if="discountlist.length <= 0">
			<image :src="Url+'mine/discount/no_discount.png'" mode=""></image>
			<view class="nodiscount_detail" @tap="todiscountcenter">
				您当前还没有优惠券！<text >去领券中心</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['discountlist'],
	data () {
		return {
			Url:this.Imgurl
		}
	},
	methods: {
		todiscountcenter () {
			uni.navigateTo({
				url:'/pageD/discount/center'
			})
		}
	}
};
</script>

<style lang="less" scoped>
	.has_discount{
		margin-top: 30upx;
		padding: 30upx 0 70upx;
		background-color: #fff;
	}
	.discount_one{
		width: calc(100% - 60upx);
		height: 206upx;
		margin: 40upx auto;
		margin-top: 20upx;
		position: relative;
		background: url(../../static/image/index/use_discount_bg.png) no-repeat;
		background-size: 100% 100%;
		.top{
			width: 100%;
			padding: 30upx;
			height: 136upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.top_left{
				flex: 1;
				font-size: 28upx;
				color: #666;
				font-weight: bold;
				padding: 14upx 0;
				border-right: 2upx solid #dadada;
				text{
					font-size: 40upx;
				}
				
			}
			.top_right{
				position: relative;
				flex:3;
				padding: 18upx;
				padding-left: 30upx;
				font-size: 32upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.top_right_2{
					margin-top: 12upx;
					width: 125upx;
					height: 34upx;
					line-height: 34upx;
					font-size: 26upx;
					color: #666;
					display: inline-block;
					border: 1px solid #666;
					text-align: center;
				}
				.btn{
					position: absolute;
					bottom: 50%;
					right: 15upx;
					width: 90upx;
					height: 90upx;
					transform: translate(0,50%);
				}
			}
		}
		.bottom{
			height: 70upx;
			padding-left: 30upx;
			font-size: 26upx;
			line-height: 72upx;
			color: #666;
		}
	}
	
	
.list {
	width: calc(100% - 60upx);
	height: 186upx;
	margin: auto;
	margin-top: 20upx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
	.list_content {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		.price {
			width: 210upx;
			height: 140upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// font-size: 32upx;
			// color: #ffffff;
			// text-align: center;
			// line-height: 140upx;
			.price_p {
				font-size: 28upx;
				color: #FFFFFF;
				text {
					font-size: 40upx;
					font-weight: bold;
				}
			}
			.price_rule {
				margin-top: 10upx;
				font-size: 24upx;
				color: #FFFFFF;
				white-space: nowrap;
			}
		}
		.info {
			width: 340upx;
			height: 100%;
			padding: 20upx 0;
			padding-left: 25upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.info_title {
				font-size: 28upx;
				color: #000;
				line-height:28upx;
			}
			.info_detail {
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
			.info_date {
				margin-top: 20upx;
				font-size: 24upx;
				color: #333333;
				line-height: 24upx;
			}
		}
			.touse {
				flex: 1;
				height: 100%;
				position: relative;
				image {
					left: 50%;
					transform: translate(-50%);
					width: 150upx;
					height: 95upx;
					position: absolute;
				}
			}
	}
	// .list_content {
	// 	width: 100%;
	// 	height: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	display: flex;
	// 	.price {
	// 		width: 186upx;
	// 		height: 186upx;
	// 		font-size: 32upx;
	// 		color: #ffffff;
	// 		text-align: center;
	// 		line-height: 186upx;
	// 		text {
	// 			font-size: 40upx;
	// 			font-weight: bold;
	// 		}
	// 	}
	// 	.info {
	// 		width: 330upx;
	// 		height: 100%;
	// 		padding-left: 25upx;
	// 		padding-top: 40upx;
	// 		box-sizing: border-box;
	// 		.info_title {
	// 			font-size: 32upx;
	// 			color: #333333;
	// 			font-weight: bold;
	// 			line-height: 32upx;
	// 		}
	// 		.info_detail {
	// 			font-size: 24upx;
	// 			color: #333333;
	// 			line-height: 24upx;
	// 			margin-top: 14upx;
	// 			margin-bottom: 20upx;
	// 		}
	// 		.info_date {
	// 			font-size: 24upx;
	// 			color: #333333;
	// 			line-height: 24upx;
	// 		}
	// 	}
	// 	.touse {
	// 		flex: 1;
	// 		height: 100%;
	// 		position: relative;
	// 		image {
	// 			left: 50%;
	// 			transform: translate(-50%);
	// 			width: 150upx;
	// 			height: 95upx;
	// 			position: absolute;
	// 		}
	// 	}
	// }
}
.no_more_discount {
	margin-top: 30upx;
	font-size: 28upx;
	color: #999999;
	text-align: center;
}
.nodiscount {
	text-align: center;
	margin-top: 300upx;
	image {
		display: block;
		margin: auto;
		width: 240upx;
		height: 200upx;
	}
	.nodiscount_detail {
		margin-top: 50upx;
		font-size: 24upx;
		color: #999999;
		text {
			color: #f73e2f;
			text-decoration:underline;
		}
	}
}
</style>
